<template>
  <div class="details_container">
    <!-- 详情页导航 -->
    <div class="details_nav">
      <span @click="onBack">返回</span>
    </div>
    <!-- 详情页头部数据 -->
    <div class="details_header">
      <div class="header_img">
        <img :src="details.data.shopInfo.shopPic" alt />
      </div>
      <div class="header_message">
        <div class="header_title">{{details.data.shopInfo.shopName}}</div>
        <div class="header_margin">{{details.data.shopInfo.deliveryMsg}}</div>
        <div>{{details.data.shopInfo.shopName}}</div>
      </div>
    </div>
    <!-- 菜单导航 -->
    <div class="details_menu">
      <div>点菜</div>
      <div>评价</div>
      <div>商家</div>
    </div>
    <!-- 详情数据 -->
    <div class="details_main">
      <div class="details_left">
        <div
          :class="selectIndex === index?'slider_item_active':'slider_item'"
          v-for="(item,index) in details.data.categoryList"
          :key="index"
          @click="onSelect(index)"
        >{{item.categoryName}}</div>
      </div>
      <div class="details_right">
        <div class="shop_title">{{right.categoryName}}</div>
        <div class="shop_item" v-for="(item,index) in right.spuList" :key="index">
          <div class="item_img">
            <img :src="item.bigImageUrl" alt />
          </div>
          <div class="item_message">
            <div class="item_title">{{item.spuName}}</div>
            <div class="item_price">￥{{item.currentPrice}}</div>
            <div class="item_count_container">
              <div @click="onMinus(item)">-</div>
              <div class="count">{{item.count}}</div>
              <div @click="onPlus(item)">+</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部结算栏 -->
    <div class="details_bottom">
      <div class="cart_button" @click="show=true">购物车</div>
      <div class="bottom_totalprice">总价：{{totalPrice}}元</div>
      <div class="bottom_button">结算</div>
    </div>
    <!-- 弹出购物车 -->
    <van-action-sheet v-model="show">
      <div class="content">
        <div class="cart_item" 
        v-for="(item,index) in cartItems" :key="index">
          <div class="cart_item_title">{{item.spuName}}</div>
          <div class="cart_item_price">￥{{item.count * item.currentPrice}}元</div>
          <div class="item_count_container">
            <div @click="onMinus(item)">-</div>
            <div class="count">{{item.count}}</div>
            <div @click="onPlus(item)">+</div>
          </div>
        </div>

        <div class="details_bottom">
          <div class="cart_button" @click="show=true">购物车</div>
          <div class="bottom_totalprice">总价：{{totalPrice}}元</div>
          <div class="bottom_button">结算</div>
        </div>
        
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectIndex: 0,
      show:false
    };
  },
  computed: {
    details() {
      return this.$store.state.details;
    },
    right() {
      return this.$store.state.rightDetails;
    },
    cartItems(){
      return this.$store.state.cartItems
    },
    totalPrice(){
      return this.$store.state.totalPrice
    }
  },
  methods: {
    onBack() {
      window.history.back();
    },
    onSelect(index) {
      this.selectIndex = index;
      this.$store.dispatch("GET_DETAILS_RIGHT", this.selectIndex);
    },
    onCartShow(){
      this.show = false
    },
    onPlus(item) {
      this.$store.dispatch("ADD_CART", item);
    },
    onMinus(item) {
      this.$store.dispatch("MINUS_CART_COUNT", item);
    }
  },
  mounted() {
    console.log(this.$store.state.details);
    this.$store.dispatch("GET_DETAILS_RIGHT", this.selectIndex);
  }
};
</script>

<style scoped>
.details_container {
  width: 100%;
}
.details_nav {
  width: 100%;
  height: 40px;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  color: #fff;
  background-color: black;
  text-indent: 20px;
}
.details_header {
  width: 100%;
  height: 120px;
  background-color: black;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
}
.header_img {
  width: 30%;
  /* height: ; */
}
.header_img img {
  width: 100%;
}
.header_message {
  width: 69%;
  color: #fff;
  font-size: 14px;
}
.header_margin {
  margin: 10px 0px;
}
.header_title {
  font-size: 18px;
}
.details_menu {
  width: 100%;
  height: 50px;
  display: inline-flex;
  justify-content: space-around;
  align-items: center;
  border-bottom: 1px solid gray;
}
.details_main {
  width: 100%;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
}
.details_left {
  width: 25%;
  height: 360px;
  overflow: scroll;
  border-right: 1px solid gray;
}
.details_right {
  width: 74%;
  height: 360px;
  overflow: scroll;
}
.slider_item {
  width: 100%;
  height: 50px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: gray;
}
.slider_item_active {
  width: 100%;
  height: 50px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: red;
  background-color: #eee;
}
.shop_item {
  width: 100%;
  height: 120px;
  /* background-color: orange; */
  display: inline-flex;
  justify-content: space-around;
  align-items: center;
}
.item_price {
  color: red;
}
.item_img {
  width: 40%;
}
.item_img img {
  width: 100%;
}
.item_message {
  width: 55%;
  height: 100%;
}
.item_title {
  font-size: 18px;
  font-weight: 700;
}
.item_count_container {
  width: 100%;
  height: 30px;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
}
.item_count_container div {
  width: 30px;
  height: 30px;
  border: 1px solid gray;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.item_count_container .count {
  width: 50px;
}
.details_bottom {
  width: 100%;
  height: 64px;
  background-color: black;
  position: fixed;
  left: 0;
  bottom: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.bottom_button {
  width: 30%;
  height: 64px;
  background-color: yellow;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.cart_button {
  width: 64px;
  height: 64px;
  background-color: yellow;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 70px;
}
.bottom_totalprice {
  width: 50%;
  color: red;
  text-indent: 30px;
}
.content {
  width: 100%;
  height: 600px;
  background-color: #fff;
}
.cart_item {
  width: 100%;
  height: 70px;
  margin-bottom: 10px;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
}
.cart_item_title {
  width: 38%;
  padding-left: 16px;
}
.cart_item .item_count_container {
  width: 30%;
}
.cart_item_price {
  width: 20%;
  text-indent: 10px;
  color: red;
}
</style>